<template>
  <div class="baseInfoPage">
    <div class="routeName">{{ $route.name }}</div>
    <el-form class="addForm mt20 errorForm" ref="form" :model="Form" :rules="rules" label-width="85px">
      <el-form-item class="noRequire" label="*农场名称：" prop="baseName">
        <el-input v-model="Form.baseName" placeholder="请输入农场名称"></el-input>
        <!-- <div v-if="!edit" class="infoBox">{{ Form.baseName }}</div> -->
      </el-form-item>
      <el-form-item class="noRequire" label="*负责人：" prop="baseLeader">
        <el-input v-model="Form.baseLeader" placeholder="请输入负责人" :disabled="true"></el-input>
        <!-- <div  class="infoBox">{{ Form.baseLeader }}</div> -->
      </el-form-item>
      <el-form-item class="noRequire" label="*联系方式：" prop="phone">
        <el-input v-model="Form.phone" placeholder="请输入联系方式"></el-input>
        <!-- <div v-if="!edit" class="infoBox">{{ Form.phone }}</div> -->
      </el-form-item>
      <!-- <el-form-item label="微信二维码：">
        <el-input v-model="Form.link"></el-input>
        <div v-if="!edit" class="infoLink">
          <img :src="Form.link" alt="" />
        </div>
      </el-form-item> -->
      <el-form-item class="noRequire" label="*农场位置：" prop="baseAddr">
        <el-cascader
          v-model="Form.baseAddr"
          :options="provinceData"
          @change="handleChange"
          placeholder="请选择"

        ></el-cascader>
        <!-- <div v-if="!edit" class="baseAddr">
          <div>{{ Form.baseAddr[0] }}</div>
          <div>{{ Form.baseAddr[1] }}</div>
          <div>{{ Form.baseAddr[2] }}</div>
        </div> -->
      </el-form-item>
      <el-form-item label="具体地址：">
        <el-input
          v-model="address"
          placeholder="请输入具体地址"

        ></el-input>
        <!-- <div v-if="!edit" class="infoBox">{{ address }}</div> -->
      </el-form-item>
      <el-form-item label="农场介绍：">
        <el-input
          v-model="Form.baseDescr"
          type="textarea"
          :rows="6"

        ></el-input>
        <!-- <div v-if="!edit" class="baseDescr">{{ Form.baseDescr }}</div> -->
      </el-form-item>
      <!-- <el-form-item class="add">
        <el-button
          class="editBtn"

          type="primary"
          @click="submit('form')"
          >提交编辑</el-button
        >
        <el-button
          class="editBtn"
          v-if="!edit"
          type="primary"
          @click="edit = true"
          >修 改</el-button
        >
      </el-form-item> -->
    </el-form>
    <div class="submitBottom">
      <el-button
        size="small"
        class="editBtn editBtnNone"
        @click="back()"
        >取消</el-button
      >
      <el-button
        class="editBtn"
        type="primary"
        size="small"
        @click="submit('form')"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import provinceData from '../../utils/city.json' // 引入省市区数据
import { getBaseInfoIdApi, editBaseInfoPageApi } from '@/api/baseInfo'
import { getUserListApi } from '@/api/dict'
import loadMap from '@/mxins/loadMap'

export default {
  mixins: [loadMap],
  data () {
    return {
      provinceData: null, // 使用引入的省市区数据
      Form: {
        baseName: '',
        baseLeader: '',
        phone: '',
        link: '',
        baseAddr: [],
        baseDescr: ''
      },
      address: '',
      edit: false,
      baseId: 1,
      rules: {
        baseName: [
          { required: true, message: '请输入农场名称', trigger: 'blur' }
        ],
        baseLeader: [
          { required: true, message: '请输入负责人员', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        baseAddr: [
          { required: true, message: '请选择农场地址', trigger: 'blur' }
        ]
      },
      resultText: ''
    }
  },
  watch: {
    resultText () {
      this.Form.baseGeo = this.resultText
    }
  },
  mounted () {
    this.baseId = this.$store.getters.userInfo.baseId
    this.provinceData = this.formatData(provinceData)
    this.getBaseInfo()
  },
  methods: {

    // 清空
    back () {
      const baseLeader = this.Form.baseLeader
      this.Form = {
        ...this.$options.data().Form,
        baseLeader
      }
      this.address = this.$options.data().address
    },
    handleChange (value, label) {
      this.searchAddress(this.Form.baseAddr.toString().replaceAll(',', ''))
    },
    // 数据渲染
    async getBaseInfo () {
      const res = await getBaseInfoIdApi(this.baseId)
      this.Form = res.data
      this.Form.baseAddr = this.Form.baseAddr.split(',')
      this.address = this.Form.baseAddr[3]
      // this.Form.address = address
      this.Form.baseAddr.pop()
      const baseAddr = JSON.parse(JSON.stringify(this.Form.baseAddr))
      this.searchAddress(baseAddr.toString().replaceAll(',', ''))
      // console.log(this.Form.address)
    },
    // 提交表单
    submit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.edit = false
          this.Form.baseId = this.baseId
          this.Form.baseAddr.push(this.address)
          this.Form.baseAddr = this.Form.baseAddr.join(',')
          const res = await editBaseInfoPageApi(this.Form)
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.$store.dispatch('user/updataBaseData', this.Form)
            this.getBaseInfo()
          } else {
            this.$message('修改失败')
          }
        } else {
          this.$message('错误提交')
        }
      })
    },
    // 用户列表
    async getUserList () {
      const res = await getUserListApi()
      console.log(res)
    },
    // 联机选择器 省市区
    formatData (data) {
      return data.map((province) => {
        return {
          value: province.name,
          label: province.name,
          children: province.cityList.map((city) => {
            return {
              value: city.name,
              label: city.name,
              children: city.areaList.map((area) => {
                return {
                  value: area.name,
                  label: area.name
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.baseInfoPage {
  background: #ffffff;
  padding: 0;
  overflow-y: auto;
}
::v-deep .el-input__inner {
  width: 300px !important;
  height: 37px;
  border-radius: 4px;
  font-size: 12px;
  // font-weight: 600;
  // font-family: PingFangSC-Semibold, PingFang SC;
}
::v-deep .el-textarea__inner {
  width: 70% !important;
  font-size: 12px;
  // font-weight: 600;
  // font-family: PingFangSC-Semibold, PingFang SC;
}
::v-deep .el-form-item__label {
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-size: 12px;
}
.infoBox {
  width: 300px !important;
  height: 37px;
  min-height: 37px;
  background: #FAFAFA;
  border-radius: 4px;
  padding-left: 1.25vw;
  line-height: 3.125vw * 0.834;
  font-size: 14px;
  // font-weight: 600;
  // font-family: PingFangSC-Semibold, PingFang SC;
}
.baseDescr {
  width: 30.6771vw;
  min-height: 3.125vw * 0.834;
  background: #FAFAFA;
  border-radius: 4px;
  padding-left: 1.25vw;
  font-size: 14px;
  line-height: 3.125vw * 0.834;
  // font-weight: 600;
  // font-family: PingFangSC-Semibold, PingFang SC;
}
.infoLink {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0px 0px 0px 0px;
}
.baseAddr {
  width: 30.6771vw;
  height: 3.125vw * 0.834;
  display: flex;
  // justify-content: space-between;
  // font-family: PingFangSC-Semibold, PingFang SC;
  background: #FAFAFA;
  padding-left: 1.25vw;
  font-size: 14px;
  line-height: 3.125vw * 0.834;
  border-radius: 4px;
  div {
    margin-right: 1.0417vw;
    // font-family: PingFangSC-Semibold, PingFang SC;
    // font-weight: 600;
  }
}
</style>
